<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表导航</title>

        <style>
            /* display:inline; padding; margin; 属性现实存在一定问题
               所以我们在进行行内元素和块状元素类型转换的时候，
               并不会直接将行内元素转成块状元素，
               也不会直接将块状元素直接行内元素。

               display:inline-block; 行内块（兼具行内显示特征， 块状元素的块状特征)
            */
            ul {
                background-color: #1479d7;
            }

            .list-item {
                display: inline-block;

                margin: 10px;
                padding: 10px;
            }

            .list-item a {
                color: #ffffffff;
                text-decoration: none;
            }

            .list-item:hover {
                background-color: #ffffffff;
            }

            .list-item:hover a {
                color: #1479d7;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="list-item">
                <a href="https://www.baidu.com">列表项1</a>
            </li>
            <li class="list-item">
                <a href="https://www.baidu.com">列表项2</a>
            </li>
            <li class="list-item">
                <a href="https://www.baidu.com">列表项3</a>
            </li>
            <li class="list-item">
                <a href="https://www.baidu.com">列表项4</a>
            </li>
        </ul>
    </body>
</html>